<script setup lang="ts">
import { IconPlay } from "@/components/icons";

interface Props {
  id: string;
  title: string;
  coverUrl: string;
  playCount: number;
}

const props = defineProps<Props>();

const formatPlayCount = (count: number) => {
  return count > 10000 ? `${Math.floor(count / 10000)}万` : count;
};
</script>

<template>
  <div class="group cursor-pointer">
    <div class="relative">
      <img
        :src="coverUrl"
        class="w-full aspect-square object-cover rounded-lg"
        :alt="title"
      />
      <div class="absolute top-1 right-2 text-white text-sm flex items-center">
        <IconPlay class="w-3 h-3 mr-1" />
        {{ formatPlayCount(playCount) }}
      </div>
      <div
        class="absolute bottom-2 right-2 p-2 bg-[#ec4141] rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
      >
        <IconPlay class="w-5 h-5 text-white" />
      </div>
    </div>
    <p class="mt-2 text-sm text-gray-800 line-clamp-2 hover:text-red-500">
      {{ title }}
    </p>
  </div>
</template>
